<template>
  <div class="financial-records">
    <el-table
      v-loading="listLoading"
      :data="list"
      fit
      border
    >
      <el-table-column label="标题" prop="title" align="center" />
      <el-table-column label="时间" prop="date" align="center">
        <template slot-scope="{row}">
          {{ row.date | parseTime }}
        </template>
      </el-table-column>
      <el-table-column label="标签" prop="type" align="center" />
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'FinancialRecords',
  data() {
    return {
      listLoading: false,
      list: []
    };
  },
  filters: {
    parseTime(time) {
      if (arguments.length === 0 || !time) {
        return null;
      }
      const format = '{y}-{m}-{d} {h}:{i}:{s}';
      const formatObj = {
        y: time.getFullYear(),
        m: time.getMonth() + 1,
        d: time.getDate(),
        h: time.getHours(),
        i: time.getMinutes(),
        s: time.getSeconds()
      }
      const timeStr = format.replace(/{([ymdhisa])+}/g, (result, key) => {
        const value = formatObj[key];
        return value.toString().padStart(2, '0');
      });
      return timeStr;
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.list = [
        { id: 0, title: '广告一', date: new Date(), type: '测试广告' }
      ];
    }
  }
};
</script>

<style lang="less">
  .financial-records {
    padding: 0 10px 10px 10px;
  }
</style>
